<style lang="less">
  @import '../../styles/common.less';
</style>

<template>
  <div style="width: 760px; margin-top: 20px;">
  <Form ref="subjectData" :model="subjectData" :rules="ruleValidate" :label-width="110">
    <div class="ivu-row">
      <div style="float: left;width: 50%">

        <FormItem label="栏目名称：" prop="subjectName">
          <Input v-model="subjectData.subjectName" placeholder="请输入栏目名称"></Input>
        </FormItem>
        <FormItem label="栏目英文：">
          <Input v-model="subjectData.subjectEn" placeholder="请输入栏目名称"></Input>
        </FormItem>
        <FormItem label="栏目图片：">
          <Row type="flex" justify="center" align="middle" class="height-100">
            <Upload
                    :format="['jpg', 'png', 'jpeg', 'gif', 'bmp', 'svg']"
                    action="/school/fileUpload/"
                    :on-format-error="handleFormatError" :on-success="handleSuccess" :on-remove="handleRemove">
              <span>选择图片上传&nbsp;&nbsp;</span>
              <Button type="ghost" icon="ios-cloud-upload-outline">上传文件</Button>
            </Upload>
          </Row>
        </FormItem>
      </div>
      <div style="float: left;width: 50%">
        <FormItem label="上级栏目：">
          <Select v-model="subjectData.parentId">
            <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
          </Select>
        </FormItem>
        <FormItem label="栏目排序：" prop="subjectSort">
          <Input v-model="subjectData.subjectSort" placeholder="请输入排序"></Input>
        </FormItem>
      </div>
    </div>


    <FormItem label="栏目描述：">
      <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue"></UE>
    </FormItem>

    <FormItem>
      <Button type="primary" @click="handleSubmit('subjectData')">提交</Button>
      <Button type="ghost" @click="handleReset('subjectData')">清空</Button>
    </FormItem>
  </Form>
  </div>
</template>

<script>
  import moment from 'moment'
  import UE from '../ue/ue.vue';
    export default {
      components: {UE},
        name: "subjectmod",
        data(){
          return{
            subjectData:{
              subjectName:'',
              desc:'',
              subjectSort:'',
              subjectPic:'',
              parentId:0,
              subjectEn:'',
              id:0
            },
            ruleValidate:{
              subjectName:[
                {required: true,message:'请输入名称',trigger:'blur'}
              ],
              subjectSort:[
                {required: true,message:'请输入排序',trigger:'blur'}
              ]
            },
            uploadList: [],
            typeList:[
              {value:0,label:'无'}
            ],
            defaultMsg: '',
            config: {
              initialFrameWidth: null,
              initialFrameHeight: 350
            },
            ue1: "ue1", // 不同编辑器必须不同的id
          }
        },
        methods:{
          handleSubmit(name){
            this.$refs[name].validate((valid) => {
              if (valid) {
                let dataArr = {
                  subjectName:this.subjectData.subjectName,
                  subjectDesc:this.$refs.ue.getUEContent(),
                  subjectSort:this.subjectData.subjectSort,
                  subjectPic:this.subjectData.subjectPic,
                  parentId:this.subjectData.parentId,
                  subjectEn:this.subjectData.subjectEn,
                  id:this.subjectData.id
                };

                if(this.subjectData.id > 0){
                  this.$http.post('/school/updSubjectData', dataArr).then(res => {
                    this.$Message.success('更新成功!');
                  });
                }else {
                  this.$http.post('/school/addSubData', dataArr).then(res => {
                    this.$Message.success('更新成功!');
                    this.handleReset(name);
                  });
                }
              }
            })
          },
          handleFormatError (file) {
            this.$Notice.warning({
              title: '文件格式不正确',
              desc: '文件 ' + file.name + ' 格式不正确，请选择图片文件。'
            });
          },
          handleSuccess(response, file, fileList){
            this.subjectData.subjectPic = response.data[0];
          },
          handleRemove(file, fileList){
            this.subjectData.subjectPic = '';
          },
          handleReset (name) {
            this.$refs[name].resetFields();
          }
        },
      mounted () {
        if(this.$route.query.id == undefined) return;
        this.$http.get('/school/getSubjectSetById?id='+this.$route.query.id).then(res=>{
          var dt = res.data.data;
          this.subjectData.subjectName = dt.subjectName;
          this.subjectData.desc = dt.subjectDesc;
          this.subjectData.subjectSort = dt.subjectSort;
          this.subjectData.subjectPic = dt.subjectPic;
          this.subjectData.parentId = dt.parentId;
          this.subjectData.subjectEn = dt.subjectEn;
          this.subjectData.id = dt.id;

          this.$refs.ue.setUEContent(dt.subjectDesc)
        });
      },
      created () {
        this.$http.get('/school/getSubTypes').then(res =>{
          var datas = res.data.data;
          for(var d in datas){
            var p = {
              value:datas[d].id,
              label:datas[d].name
            }

            this.typeList.push(p);
          }
        });
      }
    }
</script>

<style scoped>

</style>
